<template>
  <i-biz-form-item
    v-if="modelData.detailType === 'FORMITEM'"
    :modelData="modelData"
    :controller="controller.details[modelData.id]"
  />
  <i-biz-form-group-panel
    v-else-if="modelData.detailType === 'GROUPPANEL'"
    :modelData="modelData"
    :controller="controller"
  />
  <i-biz-form-button
    v-else-if="modelData.detailType === 'BUTTON'"
    :modelData="modelData"
    :controller="controller.details[modelData.id]"
  />
  <i-biz-form-raw-item
    v-else-if="modelData.detailType === 'RAWITEM'"
    :modelData="modelData"
    :controller="controller.details[modelData.id]"
  />

  <i-biz-form-tab-panel
    v-else-if="modelData.detailType === 'TABPANEL'"
    :modelData="modelData"
    :controller="controller.details[modelData.id]"
  />
  <view v-else>{{ modelData.detailType }}</view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { FormController } from "@ibiz-template/runtime";
import { IDEFormItem } from "@ibiz/model-core";
import { PropType } from "vue";

const props = defineProps({
  modelData: {
    type: Object as PropType<IDEFormItem>,
    required: true,
  },
  controller: {
    type: Object as PropType<FormController>,
    required: true,
  },
});
</script>
